<template>
    <div class="box">
        <p style="margin-left: 270px; padding-top: 15px; padding-bottom: 10px;">场馆维护/ <span style="font-size: 14px;">价格设置</span> </p>

        <div class="vip">
            <div class="vipInfo">
                <el-form :inline="true" :model="cardFrom" class="cardFrom" ref="search">
                    <el-form-item label=" 姓名">
                        <el-input v-model="cardFrom.realname" placeholder="请输入你要查询的姓名" />
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="cardFrom.tel" placeholder="请输入你要查询的手机号" />
                    </el-form-item>
                    <el-form-item label="身份证">
                        <el-input v-model="cardFrom.identity" placeholder="请输入你要查询的身份证" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getMember()">查询</el-button>
                        <el-button type="primary" @click="reset()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="vipList">
                <div>
                    <div>
                        <el-icon style=" color: #fed977;">
                            <Tickets />
                        </el-icon>
                        <p style="margin-left: 10px;">会员列表</p>

                    </div>
                    <button @click="showAdd = true">新增会员</button>
                </div>
                <table rules="rows" style="text-align: center; width: 1100px; background-color: #fff; margin-top: 20px;">
                    <tr style="height: 50px;">
                        <td>姓名</td>
                        <td>手机</td>
                        <td>身份证</td>
                        <td>注册时间</td>
                        <td>操作</td>
                    </tr>
                    <tr style="height: 60px;" v-for="(item, index) in cardList" :key="item.id"
                        :class="'tr-color-' + index % 2">
                        <td >{{ item.user_name }}</td>
                        <td>{{ item.tel }}</td>
                        <td>{{ item.identity }}</td>
                        <td>{{ formatDay(item.lastTime) }}</td>
                        <td class="bgc">
                            <button style="border: 1px solid #fed977; color: #fed977;">绑卡</button>
                            <button style="border: 1px solid rgb(150, 222, 236); color: rgb(150, 222, 236);">修改</button>
                            <button style="border: 1px solid #ff7e71; color: #ff7e71;">禁用</button>
                            <el-icon>
                                <ArrowRightBold />
                            </el-icon>
                        </td>
                    </tr>
                </table>
            </div>
            <el-pagination style="margin-top: 20px;" background layout="prev, pager, next" :total="cardFrom.total"
                v-model:page-size="cardFrom.size" @current-change="currentChange" />
        </div>

        <!-- 新增会员 -->
        <el-dialog v-model="showAdd" title="新增/修改">
            <el-form :model="addFrom" class="addFrom">
                <el-form-item label=" 姓名">
                    <el-input v-model="addFrom.realname" placeholder="请输入你的姓名" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="addFrom.tel" placeholder="请输入你的手机号" />
                </el-form-item>
                <el-form-item label="身份证">
                    <el-input v-model="addFrom.identity" placeholder="请输入你的身份证" />
                </el-form-item>
            </el-form>

            <el-form-item>
                <el-button type="primary" @click="getAddUser()">保存</el-button>
            </el-form-item>
        </el-dialog>

        <!-- 绑卡 -->
        <!-- <el-dialog v-model="bindAdd" title="绑定会员卡">
            <el-form :model="addFrom" class="addFrom">
                <el-form-item label=" 卡号">
                    <el-input v-model="addFrom.card_no" placeholder="请输入要绑定的会员卡号" />
                </el-form-item>
                <el-form-item label="卡类型">
                    <el-select  placeholder="充值卡/次卡"/>
                    <el-option v-for="item in roleList.cards" :key="item.id" :label="item.type" :value="item.id"></el-option>
                </el-form-item>
                <el-form-item label="金额">
                    <el-input v-model="addFrom.money" placeholder="请输入充值金额" />
                </el-form-item>
            </el-form>

            <el-form-item>
                <el-button type="primary" @click="BindAdd()">保存</el-button>
            </el-form-item>
        </el-dialog> -->
    </div>
</template>

<style lang="scss" scoped>
/* 定义余数为 0 的行颜色 */
.tr-color-0 {
    background: rgb(230, 219, 221);
}

/* 定义余数为 1 的行颜色 */
.tr-color-1 {
    background: #fff;
}

.box {
    background-color: #eee;
    padding-bottom: 100px;

    .vip {
        width: 1100px;
        margin: 0 auto;

    }

    .vipInfo {
        margin-top: 20px;
        padding: 20px 50px;
        background-color: #fff;

    }


    .vipList {
        margin-top: 50px;

        div {
            display: flex;
            align-items: center;
            justify-content: space-between;

            button {
                border: 0;
                outline: 0;
                color: #fff;
                padding: 5px;
                border-radius: 7px;
                background-color: rgb(165, 208, 242);
            }
        }
    }

    table {

        border-color: #cfcece;

        span {
            margin-left: 10px;
        }

        .bgc {
            button {
                border: 0;
                outline: 0;
                margin: 0 3px;
                padding: 3px;
                border-radius: 7px;
                background-color: #fff;
            }
        }

    }

}
</style>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { memberList, bindCard, addUser } from '@/api/indexs.js'
const search = ref(null)
const showAdd = ref(false)
const cardList = ref([])
const cardFrom = ref({

})
const addFrom = ref({
    user_name: '',
    tel: '',
    identity: '',
    id: '',
    times: '',

})
const getMember = () => {
    memberList(cardFrom.value).then(res => {
        cardList.value = res.data.data
        cardFrom.value.total = res.data.pagination.total
        cardFrom.value.current = res.data.pagination.current
        cardFrom.value.size = res.data.pagination.size
        console.log(res.data);
    })
}
getMember();

var currentChange = (val) => {
    cardFrom.value.current = val;
    getMember();
};

function formatDay(str) {
    return dayjs(str).format('YYYY-MM-DD');
}

//重置
const reset = () => {
    cardFrom.value.tel = ''
    cardFrom.value.realname = ''
    getMember()
}

//添加会员
const getAddUser = () => {
    addUser(addFrom.value).then(res => {
        if (res.data.code == 0) {
            alert("添加成功");
            showAdd.value = false;
            addFrom.value = {
                realname: '',
                tel: '',
                identity: '',
                card_no: '',
            }
            getMember()
        } else {
            alert(res.data.msg || "添加失败")
        }
    }).catch(err => {
        // err.response&&err.response.data&&err.response.data.msg)
        if (err.response?.data?.msg) {
            alert(err.response.data.msg);
        }
        console.log(err);
    })
}

const roleList = ref([])
//绑卡
/* const roleObj = ref({"1":"超级管理员"});
memberList({size:100})
.then(res => {
  var obj = res.data.data;
  roleList.value = obj;  
  // 把obj数组列表转换成对象
  for(var i=0;i<obj.length;i++){
    roleObj.value[obj[i].user_id] = obj[i].user_name;
    
  }
  console.log(roleList.value);
}) */

/* const BindAdd = () => {
    bindCard(addFrom.value).then(res => {
        if (res.data.code == 0) {
            alert("添加成功");
            bindAdd.value = false;
            addFrom.value = {
                realname: '',
                tel: '',
                identity: '',
                card_no: '',
                type:'',
                money:'',
                uid:'',
            }
            // getcard()
        } else {
            alert(res.data.msg || "添加失败")
        }
    }).catch(err => {
        // err.response&&err.response.data&&err.response.data.msg)
        if (err.response?.data?.msg) {
            alert(err.response.data.msg);
        }
        console.log(err);
    })
} */
</script>